<template>
  <div class="index-ChartFalseAlarmRate">
    <div class="index-module-header-max" style="position: relative;">
      <div class="index-module-title" style="color: white;">渐变柱状图</div>
    </div>
    <div class="index-ChartFalseAlarmRate-main">
      <div ref="chartRef" class="index-ChartFalseAlarmRate-chart"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()

const chartRef = ref(null)
let mapChart = null

let dataAxis = ['德阳', '成都', '绵阳', '宜宾', '南充', '泸州']

var data = [35, 20, 15, 20, 10, 30]
var colors = [
  [
    { offset: 0, color: '#DB3F3500' },
    { offset: 1, color: '#DB3F35FF' }
  ],
  [
    { offset: 0, color: '#E8AD6200' },
    { offset: 1, color: '#E8AD62FF' }
  ],
  [
    { offset: 0, color: '#E0CE2E00' },
    { offset: 1, color: '#E0CE2EFF' }
  ],
  [
    { offset: 0, color: '#4F5FF000' },
    { offset: 1, color: '#4F5FF0FF' }
  ],
  [
    { offset: 0, color: '#36EAAF00' },
    { offset: 1, color: '#36EAAFFF' }
  ],
  [
    { offset: 0, color: '#4BB3D200' },
    { offset: 1, color: '#4BB3D2FF' }
  ]
]
let option = {
  grid: {
    top: '18%',
    bottom: '4%',
    left: '0%',
    right: '0%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      color: '#C2AA90',
      fontSize: 10
    },
    axisTick: {
      alignWithLabel: true
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#7C6951'
      }
    },
    data: dataAxis
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100,
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#C2AA90',
      fontSize: 10
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: 'rgba(207,166,114,0.4)'
      }
    }
  },
  series: [
    {
      type: 'bar',
      stack: 'myBar',
      data: [60, 90, 99, 50, 70, 33],
      barMaxWidth: '22%',
      itemStyle: {
        opacity: 0.5,
        color: function (params) {
          return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[params.dataIndex % colors.length]) // 循环使用颜色数组
        }
      },
      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置在柱子顶部
        formatter: '{c}%', // 格式器，{c}代表当前柱子的数据值
        fontSize: 10,
        fontWeight: 'bold',
        color: '#E9C89FFF' // 文字颜色
      }
    },
    {
      type: 'bar',
      stack: 'myBar',
      data: [3, 3, 3, 3, 3, 3],
      tooltip: {
        show: false
      },
      barMaxWidth: '22%',
      itemStyle: {
        color: function (params) {
          // params是一个对象，包含索引（dataIndex）和其他信息
          // 根据索引或数据值来返回不同的颜色，这里仅做示例用简单逻辑
          // console.log(555, params, 666, colors[params.dataIndex % colors.length][1]);
          return colors[params.dataIndex % colors.length][1].color // 循环使用颜色数组
        }
      }
    }
  ]
}

const resizeHandler = () => {
  mapChart.resize()
}
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value, null, {
      renderer: 'svg'
    })
  }
  mapChart.dispatchAction({
    type: 'restore'
  })
  mapChart.setOption(option)
  mapChart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 })
}
onMounted(() => {
  renderMap()
  window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style lang="scss">
.index-ChartFalseAlarmRate {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: column;
  background: rgba(98, 81, 55, 0.1);

  .index-ChartFalseAlarmRate-main {
    width: 100%;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    // border: 1px solid red;
    display: flex;
  }

  .index-ChartFalseAlarmRate-chart {
    flex: 2.1;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    // border: 1px solid red;
  }

  .index-ChartFalseAlarmRate-right {
    flex: 1;
    height: 100%;
    min-width: 0;
    margin: 6px 20px;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 8%;

    // border: 1px solid red;
    .index-ChartFalseAlarmRate-right-title {
      font-size: 24px;
      font-weight: bold;
      color: #fff;
      text-shadow: 0px 0px 6px #66e1df;
    }

    .index-ChartFalseAlarmRate-right-value {
      font-size: 14px;
      color: #d0deee;
      // border: 1px solid red;
    }
  }

  .index-map-tooltip {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1c1711 0%, #18150f 100%);
    box-shadow: 0px 2px 8px 0px rgba(235, 94, 18, 0.09);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dda862;
    padding: 12px 18px;
    color: #ecf8ffe6;

    .index-item {
      display: flex;
      align-items: center;

      .index-item-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
      }

      .index-item-value {
        margin-left: 10px;
      }
    }
  }
}
</style>
